<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>

<body>
    <span style='font-size:20px;font-weight:bold;'>Modal功能</span>
    <p/>
    <p/>
    <button id="btn1" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal1 Hello World</button>
    <p/>
    <button id="btn1_1" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal1 设置窗口大小</button>
    <p/>
    <button id="btn2" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal2 最大化窗口 添加按钮</button>
    <p/>
</body>
<script>
    var Modal1;//Hello World 设置窗口大小
    var Modal2;//最大化窗口 添加按钮
    $(document).ready(function () {
        InitModal1();//Hello World 设置窗口大小
        InitModal2();//最大化窗口 添加按钮

        //显示
        $("#btn1").click(function () {
            Modal1.firstInit = false;
            Modal1.body = "Hello World";//内容
            Modal1.show();
        })
        //设置窗口大小
        $("#btn1_1").click(function () {
            Modal1.show();
            Modal1.setHeigth("500px");
            Modal1.setWidth("500px");
        });
        //最大化
        $("#btn2").click(function () {
            Modal2.show();
            Modal2.setTitle("最大化"); 
        })
        
    });

   //Hello World 设置窗口大小
    function InitModal1() {
        $(document.body).append('<div id="modal1"></div>');
        Modal1 = new bsEx.Modal("#modal1");
        Modal1.initMax = false;//是否最大化
        Modal1.body = "Hello World";//内容
        Modal1.title = "Hello World";//标题

        
    }
   
    //最大化窗口 添加按钮
    function InitModal2() {
        $(document.body).append('<div id="modal2"></div>');
        //另一种绘制方法
        Modal2 = new bsEx.Modal({
            id:"Modal2",
            renderto:"#modal2",//绘制到div
            btns:[{ id: "btn_save", text: "保存" }, { id: "closebtn" }],//按钮组
            initMax:true,//初始是否最大化
            body:"Hello World",//内容
            oninited:function () {//绘制完成后事件
                $("#btn_save").click(function () {
                    alert("点击保存按钮");
                })
            }
        });
    }
</script>
</html>